// 弹出客户列表 送优惠券页面
<template>
  <el-dialog title="" :visible.sync="centerDialogVisible" width="50%" center>
    <div class="body">
      <div class="header">
        <span>选择优惠券</span>
      </div>
      <div class="search">
        <div class="searchl">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="searchr">
          <el-input
            v-model="input"
            placeholder="请输入优惠券名称"
            append="搜索"
          >
            <template slot="append" class="end_text">搜索</template></el-input
          >
        </div>
      </div>
      <div class="content">
        <el-table
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            prop="name"
            label="优惠券名称"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="date"
            label="有效时间"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="quantity" label="库存数量" align="center">
          </el-table-column>
          <el-table-column prop="quota" label="每人限领" align="center">
          </el-table-column>
        </el-table>
      </div>
      <div class="footer">
        <div class="btn">
          <el-button class="btn_cancel" @click="cancel">取消</el-button>
          <button class="btn_determine" @click="determine">确定</button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "Popup",
  data() {
    return {
      centerDialogVisible: false,
      //   搜索选择
      options: [
        {
          value: "全部类型",
          label: "全部类型",
        },
      ],
      value: "全部类型", // 选中项
      input: "", // 优惠券名称
      // 主数据
      tableData: [
        {
          name: "满30减5优惠券",
          date: "2022-03-05~2022-04-05",
          quantity: "800",
          quota: "2",
        },
        {
          name: "满30减5优惠券",
          date: "2022-03-05~2022-04-05",
          quantity: "800",
          quota: "2",
        },
        {
          name: "满30减5优惠券",
          date: "2022-03-05~2022-04-05",
          quantity: "800",
          quota: "2",
        },
        {
          name: "满30减5优惠券",
          date: "2022-03-05~2022-04-05",
          quantity: "800",
          quota: "2",
        },
        {
          name: "满30减5优惠券",
          date: "2022-03-05~2022-04-05",
          quantity: "800",
          quota: "2",
        },
        {
          name: "满30减5优惠券",
          date: "2022-03-05~2022-04-05",
          quantity: "800",
          quota: "2",
        },
      ],
    };
  },
  methods: {
    // 数据序号选择
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 确定事件
    determine() {
      this.$message({
        type: "success",
        message: "优惠券设置成功！",
      });
      this.centerDialogVisible = false;
    },
    // 取消事件
    cancel() {
      this.centerDialogVisible = false;
    },
  },
};
</script>
<style scoped>
/* *********************************************************************总框架**************************************************************************** */
.body {
  margin: 0 auto;
  padding: 0;
}
/* *********************************************************************头部标题**************************************************************************** */
.header {
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  color: #5b5b5b;
}
/* *********************************************************************搜索区域**************************************************************************** */
.search {
  margin: 25px 0px;
  height: 50px;
}
.searchl {
  float: left;
  width: 102px;
}
.searchr {
  float: right;
  width: 366px;
}
.searchr /deep/ .el-input-group__append{
    cursor:pointer;
    background-color: #fff;
}
/* *********************************************************************主数据表格**************************************************************************** */
.content {
  margin-bottom: 80px;
}
/deep/.el-table {
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  background-color: #fff !important;
}
/* 序号背色 */
.content /deep/ .el-checkbox__inner{
    background-color: #D5D5D5;
    border-color: transparent !important;
}
/* 序号选中背色 */
.content /deep/ .is-checked .el-checkbox__inner{
    background-color: #409EFF;
    border-color: transparent !important;
}
/* 表格背色 */
/deep/ .el-table__cell{
    background-color: #fff !important;
}
/* 去除数据内容下边框 */
/deep/ tbody .el-table__cell{
    border: transparent;
}
.content /deep/ .el-table .cell {
  font-size: 14px;
  font-weight: 400;
  color: #5b5b5b;
}
/* *********************************************************************底部按钮**************************************************************************** */
.footer {
  margin: 20px;
  text-align: right;
}
</style>